/**
 * desc: 快递打印弹框页面
 */

import React, { useState, useEffect, useCallback } from "react";
import { CommonModal } from "@/views/components/CommonModal";
import { Select, Form, Modal, Popover } from "antd";
import moment from "moment";
import { batchPrintByExpressSuccessNotify } from "../../../service";

import { usePrintExpress } from "@/views/hooks/usePrintExpress";

const { Option } = Select;

const layout1 = {
	//发布表单排布
	labelCol: {
		span: 8
	},
	wrapperCol: {
		span: 14
	}
};

/**
 * selectedRows
 * onCancel
 */
export default props => {
	const { selectedRows, onCancel, fetchList } = props;

	const [form] = Form.useForm();
	const handleCancel = () => {
		onCancel();
	};

	const { printExpress, initPrinter, getTemplate, doPrint, printerList, expressData, uniqueExpress, loading, updatePrinterName } =
		usePrintExpress({
			callback: data => {
				console.log("打印结束回调", data);
				// 执行修改打印状态接口
				batchPrintByExpressSuccessNotify([...data.successList.map(e => e.logisticsNo)]).then(res => {
					const { success } = res;
					if (success) {
						onCancel();
						fetchList();
					}
				});
			}
		});
	useEffect(() => {
		// 获取 expressData=>uniqueExpress 渲染 Form
		initPrinter(selectedRows).then(({ rows, currentPrinters }) => {
			getTemplate(rows, currentPrinters, __expressData => {
				console.log("__expressData", __expressData);
			});
		});
	}, []);

	const handleOk = () => {
		// const outboundNos = selectedRows.map(e => e.outboundNo);
		// console.log("outboundNos", outboundNos);
		// printExpress(outboundNos);

		doPrint(expressData);
	};

	const handlePrinterName = (item, e) => {
		updatePrinterName({ logisticsCompany: item.logisticsCompany, printerName: e });
	};

	return (
		<CommonModal
			title={{ title: "快递批量打印" }}
			open={true}
			onCancel={handleCancel}
			width="500px"
			onOk={handleOk}
			okText="打印"
		>
			<Form form={form} {...layout1} name="order-print-setexpress">
				<Form.Item label="可打印订单数量：" name="orderCount">
					<div style={{ fontWeight: "bold" }}>{selectedRows.length}</div>
				</Form.Item>
				{uniqueExpress.length ? (
					uniqueExpress.map(item => (
						<Form.Item
							label={
								<Popover content={item.logisticsCompany}>
									<span className="textOverflowMultiOne">{item.logisticsCompany}</span>
								</Popover>
							}
							name={item.logisticsCompany}
							rules={[{ required: true, message: "请选择打印机" }]}
							key={item.uuid}
						>
							<Select
								allowClear
								placeholder="请选择打印机"
								onChange={e => handlePrinterName(item, e)}
								defaultValue={item.printerName}
							>
								{printerList.map(d => (
									<Option key={d} value={d}>
										{d}
									</Option>
								))}
							</Select>
						</Form.Item>
					))
				) : (
					<div style={{ fontSize: "16px", marginTop: "38px", textAlign: "center" }}>
						{loading
							? "正在努力获取打印数据"
							: printerList.length
								? "暂未获得物流信息，请检查运单号"
								: "未获取到打印机，将无法打印"}
					</div>
				)}
			</Form>
			{/* <CommonLoading loading={loading} /> */}
		</CommonModal>
	);
};
